<template>
  <div class="service-integration-setting">
    <n-space vertical size="large">
      <!-- 页面标题和说明 -->
      <n-card>
        <template #header>
          <n-space align="center">
            <icon-park-outline-api />
            <span>服务联动配置</span>
          </n-space>
        </template>
        <n-alert type="info" :show-icon="false">
          <template #header>
            <span>配置说明</span>
          </template>
          配置与其他子系统的API接口地址，用于数据联动和交互。包括子系统K（知识库管理系统）和子系统A（用户前端）的配置。
        </n-alert>
      </n-card>

      <!-- Tab页签配置 -->
      <n-card>
        <n-tabs type="line" animated>
          <!-- 知识库系统Tab -->
          <n-tab-pane name="system_k" tab="知识库系统">
            <template #tab>
              <n-space align="center">
                <icon-park-outline-data-display />
                <span>知识库系统</span>
              </n-space>
            </template>

            <n-space vertical size="large">
              <n-space justify="end">
                <n-button type="primary" @click="handleSave('system_k')" :loading="saveLoading.system_k">
                  <template #icon>
                    <icon-park-outline-save />
                  </template>
                  保存配置
                </n-button>
              </n-space>

              <n-form
                ref="systemKFormRef"
                :model="systemKFormData"
                :rules="systemKRules"
                label-placement="left"
                :label-width="150"
              >
                <n-grid :cols="1" :y-gap="16">
                  <!-- 基础配置 -->
                  <n-grid-item>
                    <n-card title="基础配置" size="small">
                      <n-grid :cols="2" :x-gap="16" :y-gap="16">
                        <n-grid-item>
                          <n-form-item label="基础URL" path="baseUrl">
                            <n-input
                              v-model:value="systemKFormData.baseUrl"
                              placeholder="https://api.example.com"
                              clearable
                            />
                          </n-form-item>
                        </n-grid-item>
                        <n-grid-item>
                          <n-form-item label="API密钥" path="apiKey">
                            <n-input
                              v-model:value="systemKFormData.apiKey"
                              placeholder="请输入API密钥"
                              type="password"
                              show-password-on="click"
                              clearable
                            />
                          </n-form-item>
                        </n-grid-item>
                      </n-grid>
                    </n-card>
                  </n-grid-item>

                  <!-- API接口配置 -->
                  <n-grid-item>
                    <n-card title="API接口配置" size="small">
                      <n-space vertical size="medium">
                        <!-- 获取专家列表API -->
                        <n-card size="small" embedded>
                          <template #header>
                            <n-space justify="space-between" align="center">
                              <span>获取专家列表</span>
                              <n-button
                                size="small"
                                @click="handleTestApi('system_k', 'getExpertList')"
                                :loading="apiTestLoading.getExpertList"
                                :disabled="!systemKFormData.baseUrl || !systemKFormData.apis.getExpertList.path"
                              >
                                <template #icon>
                                  <icon-park-outline-check-one />
                                </template>
                                测试此API
                              </n-button>
                            </n-space>
                          </template>

                          <n-grid :cols="2" :x-gap="16" :y-gap="16">
                            <n-grid-item>
                              <n-form-item label="接口路径" path="apis.getExpertList.path">
                                <n-input
                                  v-model:value="systemKFormData.apis.getExpertList.path"
                                  placeholder="/experts"
                                  clearable
                                />
                              </n-form-item>
                            </n-grid-item>
                            <n-grid-item>
                              <n-form-item label="请求方法" path="apis.getExpertList.method">
                                <n-select
                                  v-model:value="systemKFormData.apis.getExpertList.method"
                                  :options="methodOptions"
                                />
                              </n-form-item>
                            </n-grid-item>
                            <n-grid-item span="2">
                              <n-form-item label="接口描述">
                                <n-input
                                  v-model:value="systemKFormData.apis.getExpertList.description"
                                  placeholder="获取专家列表，返回专家的外部ID和昵称"
                                  type="textarea"
                                  :rows="2"
                                />
                              </n-form-item>
                            </n-grid-item>
                            <n-grid-item span="2">
                              <n-form-item label="完整URL">
                                <n-input
                                  :value="getFullUrl('system_k', 'getExpertList')"
                                  readonly
                                  placeholder="保存基础URL和接口路径后显示"
                                />
                              </n-form-item>
                            </n-grid-item>

                            <!-- API测试结果 -->
                            <n-grid-item span="2" v-if="apiTestResults.getExpertList">
                              <n-alert
                                :type="apiTestResults.getExpertList.success ? 'success' : 'error'"
                                :title="apiTestResults.getExpertList.success ? 'API测试成功' : 'API测试失败'"
                                size="small"
                              >
                                {{ apiTestResults.getExpertList.message }}
                                <template v-if="apiTestResults.getExpertList.data" #default>
                                  <n-divider />
                                  <n-code
                                    :code="JSON.stringify(apiTestResults.getExpertList.data, null, 2)"
                                    language="json"
                                    style="max-height: 200px; overflow-y: auto;"
                                  />
                                </template>
                              </n-alert>
                            </n-grid-item>
                          </n-grid>
                        </n-card>

                        <!-- 获取问答详情API -->
                        <n-card size="small" embedded>
                          <template #header>
                            <n-space justify="space-between" align="center">
                              <span>获取问答详情</span>
                              <n-button
                                size="small"
                                @click="handleTestApi('system_k', 'getQaDetail')"
                                :loading="apiTestLoading.getQaDetail"
                                :disabled="!systemKFormData.baseUrl || !systemKFormData.apis.getQaDetail?.path"
                              >
                                <template #icon>
                                  <icon-park-outline-check-one />
                                </template>
                                测试此API
                              </n-button>
                            </n-space>
                          </template>

                          <n-grid :cols="2" :x-gap="16" :y-gap="16">
                            <n-grid-item>
                              <n-form-item label="接口路径" path="apis.getQaDetail.path">
                                <n-input
                                  v-model:value="systemKFormData.apis.getQaDetail.path"
                                  placeholder="/qa/{request_id}"
                                  clearable
                                />
                              </n-form-item>
                            </n-grid-item>
                            <n-grid-item>
                              <n-form-item label="请求方法" path="apis.getQaDetail.method">
                                <n-select
                                  v-model:value="systemKFormData.apis.getQaDetail.method"
                                  :options="methodOptions"
                                />
                              </n-form-item>
                            </n-grid-item>
                            <n-grid-item span="2">
                              <n-form-item label="接口描述">
                                <n-input
                                  v-model:value="systemKFormData.apis.getQaDetail.description"
                                  placeholder="获取问答详情，需传入问答的request_id"
                                  type="textarea"
                                  :rows="2"
                                />
                              </n-form-item>
                            </n-grid-item>
                            <n-grid-item span="2">
                              <n-form-item label="完整URL">
                                <n-input
                                  :value="getFullUrl('system_k', 'getQaDetail')"
                                  readonly
                                  placeholder="保存基础URL和接口路径后显示"
                                />
                              </n-form-item>
                            </n-grid-item>

                            <!-- API测试结果 -->
                            <n-grid-item span="2" v-if="apiTestResults.getQaDetail">
                              <n-alert
                                :type="apiTestResults.getQaDetail.success ? 'success' : 'error'"
                                :title="apiTestResults.getQaDetail.success ? 'API测试成功' : 'API测试失败'"
                                size="small"
                              >
                                {{ apiTestResults.getQaDetail.message }}
                                <template v-if="apiTestResults.getQaDetail.data" #default>
                                  <n-divider />
                                  <n-code
                                    :code="JSON.stringify(apiTestResults.getQaDetail.data, null, 2)"
                                    language="json"
                                    style="max-height: 200px; overflow-y: auto;"
                                  />
                                </template>
                              </n-alert>
                            </n-grid-item>
                          </n-grid>
                        </n-card>
                      </n-space>
                    </n-card>
                  </n-grid-item>
                </n-grid>
              </n-form>
            </n-space>
          </n-tab-pane>

          <!-- 用户前端Tab -->
          <n-tab-pane name="system_a" tab="用户前端">
            <template #tab>
              <n-space align="center">
                <icon-park-outline-phone-call />
                <span>用户前端</span>
              </n-space>
            </template>

            <n-space vertical size="large">
              <n-space justify="end">
                <n-button type="primary" @click="handleSave('system_a')" :loading="saveLoading.system_a">
                  <template #icon>
                    <icon-park-outline-save />
                  </template>
                  保存配置
                </n-button>
              </n-space>

              <n-form
                ref="systemAFormRef"
                :model="systemAFormData"
                :rules="systemARules"
                label-placement="left"
                :label-width="150"
              >
                <n-grid :cols="1" :y-gap="16">
                  <!-- 专家详情页面配置 -->
                  <n-grid-item>
                    <n-card title="专家详情页面配置" size="small">
                      <n-grid :cols="1" :y-gap="16">
                        <n-grid-item>
                          <n-form-item label="页面URL模板" path="apis.expertDetailPage.urlTemplate">
                            <n-input
                              v-model:value="systemAFormData.apis.expertDetailPage.urlTemplate"
                              placeholder="https://www.xxx.com/expert/{expert_id}"
                              clearable
                            />
                            <template #suffix>
                              <n-tooltip trigger="hover">
                                <template #trigger>
                                  <icon-park-outline-info />
                                </template>
                                使用 {expert_id} 作为专家ID的占位符，系统会自动替换为实际的专家ID
                              </n-tooltip>
                            </template>
                          </n-form-item>
                        </n-grid-item>
                        <n-grid-item>
                          <n-form-item label="配置描述">
                            <n-input
                              v-model:value="systemAFormData.apis.expertDetailPage.description"
                              placeholder="专家详情页面URL模板，用于生成专家个人页面链接"
                              type="textarea"
                              :rows="2"
                            />
                          </n-form-item>
                        </n-grid-item>
                        <n-grid-item>
                          <n-form-item label="配置说明">
                            <n-alert type="info" size="small">
                              <template #header>
                                <span>使用说明</span>
                              </template>
                              <ul style="margin: 0; padding-left: 20px;">
                                <li>配置专家详情页面的URL模板，用于生成专家个人页面链接。在专家管理页面中，可以显示该页面的二维码和直接访问链接</li>
                                <li>URL中的 <code>{expert_id}</code> 会被替换为实际的专家ID。示例：https://www.xxx.com/expert/{expert_id}</li>
                              </ul>
                            </n-alert>
                          </n-form-item>
                        </n-grid-item>
                        <n-grid-item v-if="systemAFormData.apis.expertDetailPage.urlTemplate">
                          <n-form-item label="预览示例">
                            <n-input
                              :value="getExpertUrlPreview()"
                              readonly
                              placeholder="配置URL模板后显示预览"
                            />
                          </n-form-item>
                        </n-grid-item>
                      </n-grid>
                    </n-card>
                  </n-grid-item>

                  <!-- 静态图片配置 -->
                  <n-grid-item>
                    <n-card title="静态图片配置" size="small">
                      <n-grid :cols="1" :y-gap="16">
                        <n-grid-item>
                          <n-form-item label="图片URL模板" path="apis.staticImage.urlTemplate">
                            <n-input
                              v-model:value="systemAFormData.apis.staticImage.urlTemplate"
                              placeholder="https://cdn.xxx.com/images/{filename}"
                              clearable
                            />
                            <template #suffix>
                              <n-tooltip trigger="hover">
                                <template #trigger>
                                  <icon-park-outline-info />
                                </template>
                                使用 {filename} 作为文件名的占位符，系统会自动替换为实际的文件名
                              </n-tooltip>
                            </template>
                          </n-form-item>
                        </n-grid-item>
                        <n-grid-item>
                          <n-form-item label="配置描述">
                            <n-input
                              v-model:value="systemAFormData.apis.staticImage.description"
                              placeholder="静态图片URL模板，用于生成图片的完整访问链接"
                              type="textarea"
                              :rows="2"
                            />
                          </n-form-item>
                        </n-grid-item>
                        <n-grid-item>
                          <n-form-item label="配置说明">
                            <n-alert type="info" size="small">
                              <template #header>
                                <span>使用说明</span>
                              </template>
                              <ul style="margin: 0; padding-left: 20px;">
                                <li>配置静态图片的URL模板，用于生成图片的完整访问链接。在专家管理等页面中，图片会使用该模板生成完整URL</li>
                                <li>URL中的 <code>{filename}</code> 会被替换为实际的文件名。示例：https://cdn.xxx.com/images/{filename}</li>
                              </ul>
                            </n-alert>
                          </n-form-item>
                        </n-grid-item>
                        <n-grid-item v-if="systemAFormData.apis.staticImage.urlTemplate">
                          <n-form-item label="预览示例">
                            <n-input
                              :value="getImageUrlPreview()"
                              readonly
                              placeholder="配置URL模板后显示预览"
                            />
                          </n-form-item>
                        </n-grid-item>
                        <n-grid-item v-if="systemAFormData.apis.staticImage.urlTemplate">
                          <n-form-item label="缓存管理">
                            <n-space>
                              <n-button
                                type="warning"
                                size="small"
                                :loading="clearCacheLoading"
                                @click="handleClearImageCache"
                              >
                                清除图片URL缓存
                              </n-button>
                              <n-text depth="3" style="font-size: 12px;">
                                更新URL模板后建议清除缓存以立即生效
                              </n-text>
                            </n-space>
                          </n-form-item>
                        </n-grid-item>
                      </n-grid>
                    </n-card>
                  </n-grid-item>
                </n-grid>
              </n-form>
            </n-space>
          </n-tab-pane>
        </n-tabs>
      </n-card>


    </n-space>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useMessage } from 'naive-ui'
import type { FormInst, FormRules } from 'naive-ui'
import { serviceIntegrationApi } from '@/service/api/bizhi'

const message = useMessage()

// 表单引用
const systemKFormRef = ref<FormInst>()
const systemAFormRef = ref<FormInst>()

// 加载状态
const saveLoading = ref({
  system_k: false,
  system_a: false
})

// API测试加载状态
const apiTestLoading = ref<{ [key: string]: boolean }>({
  getExpertList: false,
  getQaDetail: false
})

// 清除缓存加载状态
const clearCacheLoading = ref(false)

// API测试结果
const apiTestResults = ref<{
  [key: string]: {
    success: boolean
    message: string
    data?: any
  }
}>({})

// 知识库系统表单数据
const systemKFormData = ref({
  baseUrl: '',
  apiKey: '',
  apis: {
    getExpertList: {
      path: '/experts',
      method: 'GET',
      description: ''
    },
    getQaDetail: {
      path: '/qa/{request_id}',
      method: 'GET',
      description: ''
    }
  }
})

// 用户前端系统表单数据
const systemAFormData = ref({
  apis: {
    expertDetailPage: {
      urlTemplate: '',
      description: ''
    },
    staticImage: {
      urlTemplate: '',
      description: ''
    }
  }
})

// 请求方法选项
const methodOptions = [
  { label: 'GET', value: 'GET' },
  { label: 'POST', value: 'POST' },
  { label: 'PUT', value: 'PUT' },
  { label: 'DELETE', value: 'DELETE' }
]

// 知识库系统表单验证规则
const systemKRules: FormRules = {
  baseUrl: [
    { required: true, message: '请输入基础URL', trigger: 'blur' },
    {
      pattern: /^https?:\/\/.+/,
      message: '请输入有效的URL地址',
      trigger: 'blur'
    }
  ],
  'apis.getExpertList.path': [
    { required: true, message: '请输入接口路径', trigger: 'blur' }
  ],
  'apis.getExpertList.method': [
    { required: true, message: '请选择请求方法', trigger: 'change' }
  ],
  'apis.getQaDetail.path': [
    { required: true, message: '请输入接口路径', trigger: 'blur' }
  ],
  'apis.getQaDetail.method': [
    { required: true, message: '请选择请求方法', trigger: 'change' }
  ]
}

// 用户前端系统表单验证规则
const systemARules: FormRules = {
  'apis.expertDetailPage.urlTemplate': [
    { required: true, message: '请输入专家详情页面URL模板', trigger: 'blur' },
    {
      pattern: /^https?:\/\/.+\{expert_id\}.*/,
      message: '请输入有效的URL模板，必须包含{expert_id}占位符',
      trigger: 'blur'
    }
  ],
  'apis.staticImage.urlTemplate': [
    {
      pattern: /^https?:\/\/.+\{filename\}.*/,
      message: '请输入有效的URL模板，必须包含{filename}占位符',
      trigger: 'blur'
    }
  ]
}

// 计算完整URL
const getFullUrl = (systemType: string, apiName: string) => {
  if (systemType === 'system_k') {
    const baseUrl = systemKFormData.value.baseUrl?.replace(/\/$/, '') || ''
    const path = (systemKFormData.value.apis as any)[apiName]?.path || ''
    if (!baseUrl || !path) return ''
    return `${baseUrl}${path.startsWith('/') ? '' : '/'}${path}`
  }
  return ''
}

// 获取专家URL预览
const getExpertUrlPreview = () => {
  const template = systemAFormData.value.apis.expertDetailPage.urlTemplate
  if (!template) return ''
  return template.replace('{expert_id}', '123456')
}

// 获取图片URL预览
const getImageUrlPreview = () => {
  const template = systemAFormData.value.apis.staticImage.urlTemplate
  if (!template) return ''
  return template.replace('{filename}', 'example.jpg')
}

// 清除图片URL缓存
const handleClearImageCache = async () => {
  try {
    clearCacheLoading.value = true

    const response = await serviceIntegrationApi.clearImageCache() as any

    if (response.code === 200) {
      message.success('图片URL模板缓存已清除')
    } else {
      throw new Error(response.message || '清除缓存失败')
    }
  } catch (error: any) {
    console.error('清除图片URL缓存失败:', error)
    const errorMessage = error?.response?.data?.message || error?.message || '清除缓存失败'
    message.error(errorMessage)
  } finally {
    clearCacheLoading.value = false
  }
}

// 保存配置
const handleSave = async (systemType: string) => {
  try {
    if (systemType === 'system_k') {
      await systemKFormRef.value?.validate()
      saveLoading.value.system_k = true

      const saveData = {
        display_name: '知识库管理系统',
        base_url: systemKFormData.value.baseUrl,
        api_key: systemKFormData.value.apiKey,
        api_config: systemKFormData.value.apis
      }

      console.log('准备保存知识库系统配置:', saveData)
      const result = await serviceIntegrationApi.updateServiceConfig('system_k', saveData)
      console.log('保存知识库系统配置成功:', result)
      message.success('知识库系统配置保存成功')
    } else if (systemType === 'system_a') {
      await systemAFormRef.value?.validate()
      saveLoading.value.system_a = true

      const saveData = {
        display_name: '用户前端系统',
        api_config: systemAFormData.value.apis
      }

      console.log('准备保存用户前端配置:', saveData)
      const result = await serviceIntegrationApi.updateServiceConfig('system_a', saveData)
      console.log('保存用户前端配置成功:', result)
      message.success('用户前端配置保存成功')
    }
  } catch (error: any) {
    console.error('保存失败:', error)
    const errorMessage = error?.response?.data?.message || error?.message || '配置保存失败，请检查输入'
    message.error(errorMessage)
  } finally {
    if (systemType === 'system_k') {
      saveLoading.value.system_k = false
    } else if (systemType === 'system_a') {
      saveLoading.value.system_a = false
    }
  }
}

// 测试具体API
const handleTestApi = async (systemType: string, apiName: string) => {
  console.log(`🔧 测试API [${systemType}:${apiName}] 按钮被点击`)
  try {
    // 设置loading状态
    apiTestLoading.value[apiName] = true
    apiTestResults.value[apiName] = undefined as any

    if (systemType === 'system_k') {
      // 验证必要字段
      if (!systemKFormData.value.baseUrl) {
        throw new Error('请先配置基础URL')
      }

      const apiConfig = (systemKFormData.value.apis as any)[apiName]
      if (!apiConfig?.path) {
        throw new Error('请先配置接口路径')
      }

      console.log('💾 开始保存配置...')
      // 先保存当前配置
      await serviceIntegrationApi.updateServiceConfig('system_k', {
        display_name: '知识库管理系统',
        base_url: systemKFormData.value.baseUrl,
        api_key: systemKFormData.value.apiKey,
        api_config: systemKFormData.value.apis
      })
      console.log('✅ 配置保存成功')

      console.log(`🚀 开始测试API [${apiName}]...`)
      let result: any

      // 根据API名称调用不同的测试方法
      switch (apiName) {
        case 'getExpertList':
          result = await serviceIntegrationApi.callSystemKApi('getExpertList', {})
          break
        case 'getQaDetail':
          // 使用测试用的request_id
          result = await serviceIntegrationApi.callSystemKApi('getQaDetail', { request_id: 'test_request_id' })
          break
        default:
          throw new Error(`不支持的API: ${apiName}`)
      }

      console.log(`📊 API [${apiName}] 调用结果:`, result)

      apiTestResults.value[apiName] = {
        success: true,
        message: 'API测试成功，响应正常',
        data: result.data
      }

      message.success(`API [${apiName}] 测试成功`)
    }
  } catch (error: any) {
    console.error(`❌ API [${apiName}] 测试失败:`, error)
    apiTestResults.value[apiName] = {
      success: false,
      message: error.response?.data?.message || error.message || 'API测试失败，请检查配置'
    }
    message.error(`API [${apiName}] 测试失败: ${error.message}`)
  } finally {
    console.log(`🏁 API [${apiName}] 测试完成，重置loading状态`)
    apiTestLoading.value[apiName] = false
  }
}



// 加载知识库系统配置
const loadSystemKConfig = async () => {
  try {
    console.log('开始加载知识库系统配置...')
    const result = await serviceIntegrationApi.getServiceConfig('system_k') as any
    console.log('加载知识库系统配置结果:', result)
    const config = result.data

    if (config) {
      // 默认API配置（只包含必要的结构字段，不覆盖用户填写的内容）
      const defaultApis = {
        getExpertList: {
          path: '/experts',
          method: 'GET',
          description: ''
        },
        getQaDetail: {
          path: '/qa/{request_id}',
          method: 'GET',
          description: ''
        }
      }

      // 合并后端配置和默认配置，确保所有API都存在，但优先使用后端保存的配置
      const mergedApis = {
        getExpertList: {
          ...defaultApis.getExpertList,
          ...(config.api_config?.getExpertList || {})
        },
        getQaDetail: {
          ...defaultApis.getQaDetail,
          ...(config.api_config?.getQaDetail || {})
        }
      }

      systemKFormData.value = {
        baseUrl: config.base_url || '',
        apiKey: config.api_key || '',
        apis: mergedApis
      }
      console.log('知识库系统表单数据已更新:', systemKFormData.value)
    }
  } catch (error: any) {
    console.error('加载知识库系统配置失败:', error)
    // 如果配置不存在，初始化默认配置
    if (error.response?.status === 404) {
      try {
        console.log('知识库系统配置不存在，尝试初始化默认配置...')
        await serviceIntegrationApi.initDefaultConfig()
        message.info('已初始化默认配置')
        await loadSystemKConfig() // 重新加载
      } catch (initError) {
        console.error('初始化默认配置失败:', initError)
        message.error('初始化配置失败')
      }
    } else {
      const errorMessage = error?.response?.data?.message || error?.message || '加载知识库系统配置失败'
      message.error(errorMessage)
    }
  }
}

// 加载用户前端配置
const loadSystemAConfig = async () => {
  try {
    console.log('开始加载用户前端配置...')
    const result = await serviceIntegrationApi.getServiceConfig('system_a') as any
    console.log('加载用户前端配置结果:', result)
    const config = result.data

    if (config) {
      // 默认API配置（只包含必要的结构字段，不覆盖用户填写的内容）
      const defaultApis = {
        expertDetailPage: {
          urlTemplate: '',
          description: ''
        },
        staticImage: {
          urlTemplate: '',
          description: ''
        }
      }

      // 合并后端配置和默认配置，优先使用后端保存的配置
      const mergedApis = {
        expertDetailPage: {
          ...defaultApis.expertDetailPage,
          ...(config.api_config?.expertDetailPage || {})
        },
        staticImage: {
          ...defaultApis.staticImage,
          ...(config.api_config?.staticImage || {})
        }
      }

      systemAFormData.value = {
        apis: mergedApis
      }
      console.log('用户前端表单数据已更新:', systemAFormData.value)
    }
  } catch (error: any) {
    console.error('加载用户前端配置失败:', error)
    // 如果配置不存在，使用默认值
    if (error.response?.status === 404) {
      console.log('用户前端配置不存在，使用默认值')
      systemAFormData.value = {
        apis: {
          expertDetailPage: {
            urlTemplate: '',
            description: ''
          },
          staticImage: {
            urlTemplate: '',
            description: ''
          }
        }
      }
    } else {
      const errorMessage = error?.response?.data?.message || error?.message || '加载用户前端配置失败'
      message.error(errorMessage)
    }
  }
}

// 页面初始化时加载配置
onMounted(() => {
  loadSystemKConfig()
  loadSystemAConfig()
})
</script>

<style scoped>
.service-integration-setting {
  padding: 20px;
}
</style>
